<template>
  <view class="my">
    <view class="header">
      <view class="header-bg" :style="{ backgroundImage: 'url(' + bg + ')' ,backgroundSize:'cover'} ">

	  </view>
      <view class="header-box">
        <view class="info">
          <view class="avatar">
            <uv-avatar :src="logo" size="75"></uv-avatar>
          </view>
          <view class="name">用户_{{username}}</view>
        </view>
        <view class="btnGroup">
          <view class="btn" @click="myyuyue">
            <uv-icon name="calendar" size="25" color="#5a99dc"></uv-icon>
            <text>我的预约</text>
          </view>
          <view class="btn" @click="mymessage">
            <uv-icon name="bell" size="25" color="#5a99dc"></uv-icon>
            <text>我的消息</text>
          </view>
          <view class="btn">
            <uv-icon name="kefu-ermai" size="25" color="#5a99dc"></uv-icon>
			<uv-button openType="contact" customStyle="border:none; height:45rpx; padding-top:10rpx; color:#5a99dc;">在线客服</uv-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import http from '@/utils/request.js'

export default {
  name: 'my',
  data() {
    return {
		logo:'',
		bg:'',
		username:'',
	};
  },
  onLoad() {
  	this.getInfo();
  },
  methods:{
	  myyuyue(){
		uni.navigateTo({url: '/pages/booking/myyuyue'})
	  },
	  mymessage(){
		uni.showToast({
			icon:'error',
			title:'暂未开放'
		})  
	  },
	  gLogin(){
		uni.navigateTo({url: '/pages/booking/mylist'})
	  },
	getInfo(){
		var that = this;
		http.post('api/index/userconfig',{}).then(function(data){
			that.logo = http.common.baseUri+data.data.userlogo;
			that.bg =  http.common.baseUri+data.data.userbg;
		})
		let userinfo = uni.getStorageSync('userinfo');
		if(userinfo){
			this.username = userinfo.mini_openid.substr(0,6)
		}
	}
  }
}
</script>

<style lang="scss" scoped>
.my {
  width: 100%;
  height: 100vh;
  background-color: #f4f4f2;

  .header {
    width: 100%;
    height: 700rpx;
    padding-top: calc(var(--status-bar-height) + var(--nav-bar-height));
    position: relative;

    &-bg {
      width: 100%;
      height: 346rpx;
      background-color: skyblue;
      @include flex(row, center, center);
    }
    &-box {
      width: 100%;
      background-color: #fff;
      .info {
        width: 100%;
        @include flex(column, center, center);
        .avatar {
          margin-top: -75rpx;
        }
        .name {
          margin-top: 42rpx;
          font-size: 46rpx;
          font-weight: 600;
        }
      }
      .btnGroup {
        margin-top: 56rpx;
        margin-bottom: 28rpx;
        width: 100%;
        @include flex(row, center, center);
        .btn {
          width: 0;
          flex: 1;
          padding-bottom: 6rpx;
          &:not(:last-child) {
            border-right: 1px solid #eee;
          }
          @include flex(column, center, center);
          font-size: 25rpx;
          color: #5a99dc;
          /deep/.uv-icon {

          }
          text {
            margin-top: 20rpx;
          }
        }
      }
    }
  }
}
</style>
